<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>progressBar进度条demo</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy-min.js" charset="utf-8"></script>
</head>
<body>

<article id="main">
    <h4>progressBar进度条demo</h4>
    <div class="demo-wrapper">
        <div id="J_ProgressBarWrapper"></div>
        <div style="margin-top: 10px;"><input type="button" value="增加10%" id="J_AddValue"></div>
    </div>
    <pre class='brush: js;'>
        S.use('gallery/form/1.3/uploader/plugins/progressBar/progressBar,gallery/form/1.3/uploader/themes/default/style.css', function (S, ProgressBar) {
            var bar = new ProgressBar('#J_ProgressBarWrapper');
            bar.render();
            $("#J_AddValue").on('click', function (ev) {
                var val = bar.get('value');
                bar.set('value', val + 20);
            })
        });
    </pre>
    <h5>修改进度</h5>
    <p>设置value属性即可修改进度条的进度。</p>
    <pre class='brush: js;'>
        bar.set('value', 20);
    </pre>
    <h5>设置进度条宽度</h5>
    <pre class='brush: js;'>
        var bar = new ProgressBar('#J_ProgressBarWrapper',{width:200});
    </pre>
    <h5>show()：显示进度条</h5>
    <pre class='brush: js;'>
        bar.show();
    </pre>
    <h5>hide()：隐藏进度条</h5>
    <pre class='brush: js;'>
        bar.hide();
    </pre>
    <script>
        var S = KISSY, $ = S.Node.all;
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:"../../../../../../",
                    charset:"utf-8"
                }
            ]
        });
        S.use('gallery/form/1.3/uploader/plugins/progressBar/progressBar,gallery/form/1.3/uploader/themes/default/style.css', function (S, ProgressBar) {
            var bar = new ProgressBar('#J_ProgressBarWrapper');
            bar.render();
            $("#J_AddValue").on('click', function (ev) {
                var val = bar.get('value');
                bar.set('value', val + 20);
            })
        });
    </script>
</article>
<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>